<template>
  <div class="tag-catalog">
    <el-card>
      <tag-content-header add search refresh setting @toolFun="toolFun" :settingData="columns">
        <template #title>
          <span>标签体系列表</span>
        </template>
        <template
          #toolsPre
          v-if="$auth('dcl:dclAssetCatalogClass:add,dcl:dclAssetCatalog:add,dcl:dclAssetCatalogMount:add')"
        >
          <el-tooltip effect="dark" content="批量挂载标签" placement="top">
            <el-button type="primary" plain circle @click="bathImport">
              <icon-svg name="iconImport"></icon-svg>
            </el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="下载批量挂载标签模板" placement="top">
            <el-button type="primary" plain circle @click="downloadTemplate">
              <icon-svg name="iconDownload"></icon-svg>
            </el-button>
          </el-tooltip>
        </template>
      </tag-content-header>
      <tag-table
        ref="table"
        @refresh="getList"
        :data="dataList"
        :loading="loading"
        :columns="columns"
        :params="params"
        :total="totalSize"
      >
        <template #annc="{scope}">
          <span class="circle" :class="{ red: !scope.row.annc }"></span>{{ scope.row.annc ? '是' : '否' }}
        </template>
        <template #catalogClassType="{scope}">
          <span>
            <icon-svg :name="scope.row.catalogClassType | iconFormatter" class="svg-catalog"></icon-svg>
            {{ $dict('catalog_type')[scope.row.catalogClassType] }}
          </span>
        </template>
        <template #operation="{ scope }">
          <div class="operation-button-box">
            <!-- <el-tooltip
              effect="dark"
              :content="typeName[scope.row.catalogClassType]"
              placement="top"
              :enterable="false"
            >
              <icon-svg
                :name="scope.row.catalogClassType | iconFormatter"
                class="svg-catalog"
                @click.native="toggleStatus(scope.row)"
              ></icon-svg>
            </el-tooltip> -->
            <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
              <icon-svg name="iconEdit" class="svg-edit" @click.native="handleEdit(scope.row)"></icon-svg>
            </el-tooltip>
            <el-tooltip effect="dark" content="体系管理" placement="top" :enterable="false">
              <icon-svg name="iconPin" class="svg-pin" @click.native="getCategory(scope.row)"></icon-svg>
            </el-tooltip>
            <el-tooltip effect="dark" content="标签挂载" placement="top" :enterable="false">
              <icon-svg name="iconMount" class="svg-mount" @click.native="handleMount(scope.row)"></icon-svg>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
              <icon-svg name="iconDelete" class="svg-delete" @click.native="handleDelete(scope.row)"></icon-svg>
            </el-tooltip>
          </div>
        </template>
      </tag-table>
      <catalog-edit-drawer ref="catalogEditDrawer" @refresh="getList" @category="getCategory"></catalog-edit-drawer>
      <category-drawer ref="categoryDrawer"></category-drawer>
      <catalog-type-drawer ref="catalogTypeDrawer" @callback="getList"></catalog-type-drawer>
      <catalog-tag-import-drawer ref="catalogTagImportDrawer"></catalog-tag-import-drawer>
    </el-card>
  </div>
</template>

<script>
import catalogEditDrawer from './catalog-edit-item'
import categoryDrawer from './catalog-category-item'
import catalogTypeDrawer from './catalog-type-drawer'
import catalogTagImportDrawer from './catalog-tag-import-drawer'
export default {
  components: {
    catalogEditDrawer,
    categoryDrawer,
    catalogTypeDrawer,
    catalogTagImportDrawer
  },
  data() {
    return {
      loading: false,
      dataList: [],
      columns: [
        {
          show: true,
          label: '标签体系名称',
          prop: 'catalogClassNm',
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '归属',
          prop: 'belongDeptNm',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: true,
          label: '发布范围',
          prop: 'anncRangeCd',
          dict: 'catalog_annc_range',
          dot: {
            1: '#4e5aa4',
            2: '#7ac7c1',
            3: '#8ac0ee'
          },
          align: 'center'
        },
        {
          show: true,
          label: '描述',
          prop: 'catalogClassDesc',
          align: 'center'
        },
        {
          show: true,
          label: '发布日期',
          prop: 'anncDt',
          align: 'center'
        },
        {
          show: true,
          label: '体系类型',
          prop: 'catalogClassType',
          align: 'center'
        },
        {
          show: 'fixed',
          label: '操作',
          prop: 'operation',
          align: 'center',
          width: 200
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  // created() {
  //   this.getList()
  // },
  methods: {
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('dcl/dclAssetCatalogClass/pageList'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data.currentPageNum === this.params.currentPageNum) {
            this.dataList = data.data.records
            this.totalSize = data.data.totalSize
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toolFun(operation) {
      switch (operation) {
        case 'add':
          this.$refs.catalogEditDrawer.showDrawer({ type: 'add' })
          break
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'refresh':
          // 刷新动作
          this.getList()
          break
      }
    },
    toggleStatus(scope) {
      let params = {
        catalogClassId: scope.catalogClassId,
        catalogClassNm: scope.catalogClassNm,
        catalogClassType: scope.catalogClassType
      }
      this.$refs.catalogTypeDrawer.showDrawer(params)
    },
    handleDelete(row) {
      this.$confirm('确认删除【' + row.catalogClassNm + '】？')
        .then(() => {
          let messageBox = document.getElementsByClassName('el-message-box__wrapper')
          messageBox[0].focus() // 防止按空格键重复确定
          this.$ajax({
            url: this.$ajax.setUrl(`dcl/dclAssetCatalogClass/${row.catalogClassId}`),
            method: 'delete',
            params: this.$ajax.setParams()
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.getList()
              this.$message.success('操作成功')
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        })
        .catch(() => {})
    },
    handleEdit(row) {
      this.$ajax({
        url: this.$ajax.setUrl(`dcl/dclAssetCatalogClass/${row.catalogClassId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$refs.catalogEditDrawer.showDrawer({
            type: 'edit',
            data: data.data
          })
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    downloadTemplate() {
      this.$ajax({
        url: this.$ajax.setUrl('stg/stgStdFile/import/tmpl'),
        method: 'get',
        params: this.$ajax.setParams({
          tmplId: 4
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$dlFile(data.data.fileId)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    bathImport() {
      this.$refs.catalogTagImportDrawer.showDrawer()
    },
    handleMount(row) {
      this.$blank('mount', {
        newpage: true,
        params: {
          catalogClassId: row.catalogClassId
        }
      })
    },
    getCategory(row) {
      this.$refs.categoryDrawer.showDrawer({
        id: row.catalogClassId,
        name: row.catalogClassNm,
        catalogClassType: row.catalogClassType
      })
    }
  },
  filters: {
    iconFormatter(icon) {
      let iconName = ''
      switch (icon) {
        case 0:
          iconName = 'iconCommon'
          break
        case 1:
          iconName = 'iconBasic'
          break
        case 2:
          iconName = 'iconScene'
          break
        case 3:
          iconName = 'iconTouch'
          break
        case 4:
          iconName = 'iconPicture'
          break
        case 5:
          iconName = 'iconEvent'
          break
        case 6:
          iconName = 'iconCalculate'
          break
        default:
          iconName = 'iconCommon'
          break
      }
      return iconName
    }
  }
}
</script>

<style lang="scss">
.tag-catalog {
  .operation-button-box {
    .svg-mount {
      color: #f6bf1b;
    }
  }
  .svg-catalog {
    width: 20px;
    height: 20px;
    color: $theme-color;
    vertical-align: middle;
    margin-top: -5px;
  }
  .icon-svg__iconEvent,
  .icon-svg__iconScene,
  .icon-svg__iconCalculate {
    width: 16px;
    height: 16px;
  }
}
</style>
